<template>
  <div>
    <control :config="config" />
    <div class="layout-header" style="float:left">
      <router-link v-if="url!=undefined&&url!=''" :to="url">
          <el-button type="primary" icon="el-icon-plus" >添加</el-button>
        </router-link>
      <el-button
        v-else
        type="primary"
        icon="el-icon-plus"
        style="margin-left:0px"
        @click="changeEdit(0)"
      >添加</el-button>
    </div>
    <div class="layout-content">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%;margin-top:50px"
      >
        <el-table-column align="center" prop="title" label="商品名"  />
        <el-table-column align="center" prop="thumb" label="封面" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="50">
          </template>
        </el-table-column>

        <el-table-column align="center" prop="show_price" label="展示价格" width="80" />
        <el-table-column align="center" prop="real_price" label="销售价格" width="80" />
        <el-table-column align="center" prop="status" label="是否启用" width="80">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.status === 1 ? 'primary' : 'success'"
              size="mini"
              @click="change_status(scope.row.id, 'status', scope.row.status)"
            >{{ scope.row.status === 1 ? "是" : "否" }}</el-button>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="is_recommend" label="是否推荐" width="80">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.is_recommend === 1 ? 'primary' : 'success'"
              size="mini"
              @click="
                change_status(
                  scope.row.id,
                  'is_recommend',
                  scope.row.is_recommend
                )
              "
            >{{ scope.row.is_recommend === 1 ? "是" : "否" }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="total_stock" label="总库存" width="80" />
        <el-table-column align="center" prop="stock" label="库存" width="80" />
        <el-table-column align="center" prop="buy_stock" label="已买" width="80" />
        <el-table-column align="center" prop="buy_number" label="限购" width="80" />
        <el-table-column align="center" prop="start_time" label="开始时间" width="180" >
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="isGreaterNow(scope.row.start_time)">未开始</el-tag>
            {{scope.row.start_time}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="end_time" label="结束时间" width="180" >
          <template slot-scope="scope">
             <el-tag type="danger" size="mini" v-if="!isGreaterNow(scope.row.end_time)">已结束</el-tag>
            {{scope.row.end_time}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="description" label="描述" width="250"/>
        <el-table-column
          align="center"
          prop="telephone"
          :fixed="isMobile()?undefined:'right'"
          width="150"
          label="操作"
        >
          <template slot-scope="scope">
            <router-link v-if="url!=undefined&&url!=''" :to="url + scope.row.id">
              <el-button size="mini" type="primary" icon="el-icon-edit" />
            </router-link>
            <el-button v-else type="primary" size="mini" icon="el-icon-edit" @click="changeEdit(scope.row.id)" />
            <el-button
              style="margin-left:0px;"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="onDel(scope.row.id)"
            />
            <el-button
            style="margin-left:0px;"
              v-if="scope.row.is_spec > 0"
              size="mini"
              type="success"
              icon="el-icon-s-tools"
              @click="stock_click(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- 规格 -->
     <el-dialog
      title="操作规格库存"
      :visible.sync="spec_dialog"
      height="50%"
      width="70%"
    >
      <el-table
        :data="spec_tableData"
        stripe
        :loading="spec_loading"
        align="center"
        max-height="340px"
        highlight-current-row
        style="width: 100%; margin-top: -10px;"
      >
        <el-table-column prop="spec_key_name" label="规格" width="250" />
         <el-table-column prop="stock" label="当前库存" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stock" />
          </template>
        </el-table-column>
        <el-table-column prop="real_price" label="销售价格" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.real_price" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.status === 1 ? 'primary' : 'success'"
              size="mini"
              @click="change_status2(scope.row.id, 'status', scope.row.status)"
              >{{ scope.row.status === 1 ? "是" : "否" }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="thumb" label="上传图片" width="100">
          <template slot-scope="scope">
            <el-upload
              :action="thumb_url"
              :show-file-list="false"
              :before-upload="$beforeAvatarUpload"
              :on-success="handle_thumb"
            >
              <img
                v-if="scope.row.thumb"
                style="width: 82px; height: 50px;"
                :src="scope.row.thumb"
                class="avatar"
              />
              <el-button
                v-else
                size="mini"
                type="primary"
                @click="thumbClick(scope.row.id, scope.row.goods_id)"
                >上传图片</el-button
              >
            </el-upload>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="change_stock" label="修改库存">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.change_stock"
              label="描述文字"
            />
            <el-input
              v-if="scope.row.change_stock !== 0"
              v-model="scope.row.remark"
              style="margin-top: 5px;"
              type="textarea"
              :rows="3"
              placeholder="请输入修改原因"
            />
          </template>
        </el-table-column> -->
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="spec_dialog = false">取 消</el-button>
        <el-button type="primary" @click="modify_spec_stock()">保 存</el-button>
      </span>
    </el-dialog>
        <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import control from '../../../components/control/control'
export default {
  name: 'SpecialOfferEdit',
  components: { control },
  props: ['type','url'],
  data() {
    return {
      goods_special_id: 0,
      goods_id: '',
      spec_id: '',
      thumb_url: '',
      loading: false,
      spec_loading: false,
      spec_dialog: false,
      dialog_visible: false,
      config: [
        { type: 'text', placeholder: '请输入商品名', field: 'title', val: '' },
        {
          type: 'select',
          placeholder: '请选择启用状态',
          field: 'status',
          val: '',
          options: [
            {
              value: '',
              label: '全部'
            },
            {
              value: 0,
              label: '未启用'
            },
            {
              value: 1,
              label: '已启用'
            }
          ]
        }
      ],
      stock_form: {},
      spce_form: [],
      dateTime: '',
      value: '',
      searchWhere: {
        title: '',
        system_sort: [],
        status: '',
        type: this.type,
        shops_sort: []
      },
      tableData: [],
      spec_tableData: [],
      total: 0,
      current_page: 1,
      per_page: 14,
      rules: {
        remark: [
          { required: true, message: '请输入修改原因', trigger: 'blur' }
        ],
        stock: [{ required: true, message: '请输入添加数量', trigger: 'blur' }]
      },
      spce_rules: {}
    }
  },
  watch: {
    type(val) { // 监控type是否发生变化 搜索不同type商品
      this.searchWhere.type = val
      this.onSearch()
    }
  },
  activated(){
    if(this.$getUpdate()){
      this.onSearch()
    }
  },
  created() {
    this.thumb_url = process.env.VUE_APP_BASE_API + '/pub/Upload/upload'
    this.onSearch()
  },
  methods: {
    isGreaterNow(time){
      return new Date(time)>new Date()
    },
    changeEdit(id) {
        this.$store.commit('user/SET_EDITID',id)
      this.$store.commit('user/SET_EDIT',6)
    },
    handleSizeChange(val) {
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.onSearch()
    },
    // 查询
    onSearch() {
      this.loading = true
      const form = {}
      const map = {}
      form.page = this.current_page
      map.title = this.searchWhere.title
      map.status = this.searchWhere.status
      map.type = this.type
      form.map = map
      this.get('/shop/GoodsSpecial/index', form, 'POST').then(e => {
        // console.log(e)
        this.tableData = e.list.data
        this.per_page = e.list.per_page
        this.total = e.list.total
        this.current_page = e.list.current_page
        this.loading = false
      })
    },
    change_status(id, field, val) {
      this.update(id, val, field, 'GoodsSpecial', 'shop').then(e => {
        e ? this.onSearch() : ''
        
      })
    },
    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      console.log(id)
    },
    stock_click(row) {
      this.goods_special_id = row.id
      this.spec_info()
      this.spec_dialog = true
    },
    // 操作库存
    modify_stock(formName) {
      this.$refs[formName].validate(v => {
        if (v) {
          this.get('/shop/GoodsSpecial/update_stock', this.stock_form, 'post').then(
            e => {
              this.$msg_ok('success', '操作成功')
              this.dialog_visible = false
              this.onSearch()
            }
          )
        }
      })
    },
     // 更改启用状态
    change_status2(id, field, status) {
      const index = this.spec_tableData.findIndex((e) => e.id === id);
      this.spec_tableData[index].status === 1
        ? (this.spec_tableData[index].status = 0)
        : (this.spec_tableData[index].status = 1);
    },
    // 规格属性信息列表
    spec_info() {
      this.spec_loading = true
      const form = {
        goods_special_id: this.goods_special_id
      }
      this.get('/shop/GoodsSpecial/spec_list', form, 'POST').then(e => {
        this.spec_tableData = e.list
        this.spec_loading = false
      })
    },
    // 操作规格库存
    modify_spec_stock() {
      const form = {
        goods_id: this.goods_id,
        list: this.spec_tableData
      }
      this.get('/shop/GoodsSpecial/spec_save', form, 'post').then(
        e => {
          this.$msg_ok('success', '操作成功')
          this.spec_dialog = false
          this.onSearch()
        }
      )
    },
    thumbClick(id, goods_id) {
      this.spec_id = id
      this.goods_id = goods_id
    },
    // 上传成功
    handle_thumb(res, file) {
      const index = this.spec_tableData.findIndex(e => e.id === this.spec_id)
      this.spec_tableData[index].thumb = file.response.data.path
    },
    // 删除
    onDel(id) {
      this.$msg_confirm().then(e => {
        this.get('/shop/GoodsSpecial/del?id=' + id, '', 'POST').then(res => {
          this.onSearch()
        })
      })
    }
  }
}
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
</style>>
